const dragscroll = (el) => {

    // el.addEventListener('touchstart', start, false);
    //
    // function start(evt) {
    //   console.log('in to touchstart')
    //   evt.preventDefault()
    //   const disY = evt.clientY; // 需要上下移动可以加
    //   // const originalScrollLeft = el.scrollLeft;
    //   const originalScrollTop = el.scrollTop; // 需要上下移动可以加
    //   const originalScrollBehavior = el.style['scroll-behavior'];
    //   const originalPointerEvents = el.style['pointer-events'];
    //   el.style['scroll-behavior'] = 'auto';
    //
    //   el.addEventListener('touchmove', move, false);
    //
    //   function move(evt1) {
    //     console.log('in to touchmove')
    //     evt1.preventDefault();
    //     // const distanceX = dv.clientX - disX;
    //     const distanceY = evt1.clientY - disY; // 需要上下移动可以加
    //     // el.scrollTo(originalScrollLeft - distanceX, originalScrollTop - distanceY);   // 需要上下移动和左右移动
    //     // el.scrollTo(0, originalScrollTop - distanceY);   // 需要上下移动和左右移动
    //     // el.scrollTo(originalScrollLeft - distanceX, 0); // 不需要上下拖拽，y轴值为0
    //     el.scrollTop = (originalScrollTop - distanceY);
    //     console.log(el)
    //     console.log(el.scrollTop)
    //     console.log(originalScrollTop - distanceY)
    //   }
    //
    //   el.addEventListener('touchcancel', cancel, false);
    //
    //   function cancel() {
    //     console.log('in to touchcancel')
    //
    //
    //     el.removeEventListener('touchcancel')
    //     el.removeEventListener('touchmove')
    //     el.style['scroll-behavior'] = originalScrollBehavior;
    //     el.style['pointer-events'] = originalPointerEvents;
    //   }
    //
    // }


    el.onmousedown = ev => {
        // console.log('in to onmousedown clientY')
        // const disX = ev.clientX;
        const disY = ev.clientY; // 需要上下移动可以加
        // const originalScrollLeft = el.scrollLeft;
        const originalScrollTop = el.scrollTop; // 需要上下移动可以加
        const originalScrollBehavior = el.style['scroll-behavior'];
        const originalPointerEvents = el.style['pointer-events'];
        el.style['scroll-behavior'] = 'auto';


        // 鼠标移动事件是监听的整个document，这样可以使鼠标能够在元素外部移动的时候也能实现拖动
        document.onmousemove = dv => {
            // console.log('in to onmousemove clientY')
            dv.preventDefault();
            // const distanceX = dv.clientX - disX;
            const distanceY = dv.clientY - disY; // 需要上下移动可以加
            // el.scrollTo(originalScrollLeft - distanceX, originalScrollTop - distanceY);   // 需要上下移动和左右移动
            // el.scrollTo(0, originalScrollTop - distanceY);   // 需要上下移动和左右移动
            // el.scrollTo(originalScrollLeft - distanceX, 0); // 不需要上下拖拽，y轴值为0
            el.scrollTop = (originalScrollTop - distanceY);
          console.log(originalScrollTop - distanceY)
            //   console.log(el.scrollTop)
        };
        document.onmouseup = () => {
            // console.log('in to onmouseup')

            document.onmousemove = null;
            document.onmouseup = null;
            el.style['scroll-behavior'] = originalScrollBehavior;
            el.style['pointer-events'] = originalPointerEvents;
        };
    };

    //
    // el.onmousedown = ev => {
    //   // console.log('in to onmousedown')
    //   // const disX = ev.clientX;
    //   const disY = ev.clientY; // 需要上下移动可以加
    //   // const originalScrollLeft = el.scrollLeft;
    //   const originalScrollTop = el.scrollTop; // 需要上下移动可以加
    //   const originalScrollBehavior = el.style['scroll-behavior'];
    //   const originalPointerEvents = el.style['pointer-events'];
    //   el.style['scroll-behavior'] = 'auto';
    //
    //
    //
    //   // 鼠标移动事件是监听的整个document，这样可以使鼠标能够在元素外部移动的时候也能实现拖动
    //   document.onmousemove = dv => {
    //     // console.log('in to onmousemove')
    //     dv.preventDefault();
    //     // const distanceX = dv.clientX - disX;
    //     const distanceY = dv.clientY - disY; // 需要上下移动可以加
    //     // el.scrollTo(originalScrollLeft - distanceX, originalScrollTop - distanceY);   // 需要上下移动和左右移动
    //     // el.scrollTo(0, originalScrollTop - distanceY);   // 需要上下移动和左右移动
    //     // el.scrollTo(originalScrollLeft - distanceX, 0); // 不需要上下拖拽，y轴值为0
    //     el.scrollTop=(originalScrollTop - distanceY);
    //     // console.log(el.scrollTop)
    //   };
    //   document.onmouseup = () => {
    //     // console.log('in to onmouseup')
    //
    //     document.onmousemove = null;
    //     document.onmouseup = null;
    //     el.style['scroll-behavior'] = originalScrollBehavior;
    //     el.style['pointer-events'] = originalPointerEvents;
    //   };
    // };

};
export default dragscroll;
